﻿@{
    Layout = null;
}

<link href="@Url.Content("~/Content/Site.css?v=" + DateTime.Now.Ticks.ToString())")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/foundation.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.11.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/PencasFunctionality.js?v=" + DateTime.Now.Ticks.ToString())" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/foundation.min.js")" type="text/javascript"></script>

@if (ViewBag.TablasPartidos != null && ViewBag.TablasPartidosSegundaFase != null){
    <div class="small-12 columns">
        <div class="tabPronosticosContainer row">
            <div class="small-10 small-offset-1 columns end" style="height:40px">
                <ul class="small-block-grid-3">
                    <li class="tabPronosticos active" data-openFase="group">Grupos</li>
                    <li class="tabPronosticos" data-openFase="playoff">2ª fase</li>
                    <li class="tabPronosticos" data-openFase="specials">Especiales</li>
                </ul>
            </div>
        </div>
    
        <div class="contenedorFase" data-fase="group">
            @foreach (System.Data.DataTable table in ((System.Data.DataSet)ViewBag.TablasPartidos).Tables)
            {
                <div class="contenedorPronosticos group row" data-containerType="group" style="display:none">
                    <div class="row" style="margin-top:20px; margin-bottom:20px">
                        <div class="small-4 columns text-right backArrow" data-arrowType="group"><img height="25px" width="25px" src="@Url.Content("~/Content/img/backArrow.png")"/></div>
                        <div class="small-4 columns text-center nombreGrupo">@table.Rows[0]["NombreGrupo"]</div>
                        <div class="small-4 columns text-left forwardArrow" data-arrowType="group"><img height="25px" width="25px" src="@Url.Content("~/Content/img/forwardArrow.png")"/></div>
                    </div>
                    @foreach (System.Data.DataRow row in table.Rows)
                    {
                        <div class="match row">
                            <div class="show-for-medium-up medium-1 medium-offset-1 columns" style="font-size:80%; margin-top:8px">@String.Format("{0:dd/MM}", DateTime.Parse((string)row["FechaHora"]))</div>
                            <div class="show-for-medium-up medium-1 columns" style="font-size:80%; margin-top:8px">@String.Format("{0:HH:mm}", DateTime.Parse((string)row["FechaHora"]))</div>
                            <div class="small-4 medium-2 columns text-right" style="margin-top:8px">@row["NombreA"]</div>
                            <div class="small-1 medium-1 columns text-center" style="margin-top:4px"><img height="30px" width="30px" src="@Url.Content(string.Concat("~/Content/img/", row["NombreA"], ".png").Replace(" ", "_").Replace("á", "a").Replace("é", "e").Replace("í", "i").Replace("ó", "o").Replace("ú", "u").Replace("ñ", "n"))" alt=""/></div>
                            <div class="small-2 medium-2 columns text-center" style="margin-top:4px">@row["PronosticoA"].ToString().Replace("-1", "?") - @row["PronosticoB"].ToString().Replace("-1", "?")</div>
                            <div class="small-1 medium-1 columns text-center" style="margin-top:4px"><img height="30px" width="30px" src="@Url.Content(string.Concat("~/Content/img/", row["NombreB"], ".png").Replace(" ", "_").Replace("á", "a").Replace("é", "e").Replace("í", "i").Replace("ó", "o").Replace("ú", "u").Replace("ñ", "n"))" alt=""></div>
                            <div class="small-4 medium-3 columns" style="margin-top:8px">@row["NombreB"]</div>
                        </div>
                    }
                </div>
            }
        </div>
    
        <div class="contenedorFase" data-fase="playoff">
            @foreach (System.Data.DataTable table in ((System.Data.DataSet)ViewBag.TablasPartidosSegundaFase).Tables)
            {    
                <div class="contenedorPronosticos playoff row" data-containertype="playoff">
                    <div class="row" style="margin-top:20px; margin-bottom:20px">
                        <div class="small-4 columns text-right backArrow" data-arrowtype="playoff"><img height="25px" width="25px" src="@Url.Content("~/Content/img/backArrow.png")"></div>
                        <div class="small-4 columns text-center nombreGrupo">@table.Rows[0]["NombreGrupo"]</div>
                        <div class="small-4 columns text-left forwardArrow" data-arrowtype="playoff"><img height="25px" width="25px"src="@Url.Content("~/Content/img/forwardArrow.png")"></div>
                    </div>

                    @foreach (System.Data.DataRow row in table.Rows)
                    {
                        <div class="match row">
                            <div class="show-for-medium-up medium-1 columns" style="margin-top:8px; font-size:80%">@String.Format("{0:dd/MM}", DateTime.Parse((string)row["FechaHora"]))</div>
                            <div class="show-for-medium-up medium-1 columns" style="margin-top:8px; font-size:80%">@String.Format("{0:HH:mm}", DateTime.Parse((string)row["FechaHora"]))</div>
                            <div class="small-2 medium-1 columns text-right" style="margin-top: 8px;" data-positionText="@row["Id"]A"></div>
                            <div class="small-3 medium-3 columns text-right equipoPronosticado" style="height:25px; margin-top:5px">@row["IdA"]</div>
                            <div class="small-1 medium-1 columns text-center" style="margin-top:4px;">@row["GolesA"].ToString().Replace("-1", "?") - @row["GolesB"].ToString().Replace("-1", "?")</div>
                            <div class="small-3 medium-3 columns equipoPronosticado" style="height:25px; margin-top:5px">@row["IdB"]</div>
                            <div class="small-2 medium-1 columns text-left" style="margin-top: 8px;" data-positionText="@row["Id"]B"></div>
                            <div class="small-1 medium-1 columns">
                                <div style="width:20px; margin-top: 8px; font-weight: bold; color: black; background-color:White; border-radius: 8px 8px 8px 8px">@row["Id"]</div>
                            </div>
                        </div>
                    }
                </div>    
            }
        </div>
    
        <div class="contenedorFase" data-fase="specials">
            <div class="contenedorPronosticos specials row" data-containertype="specials">
                <div style="color:White; margin-top:30px">
                    <div class="row">
                        <div class="small-6 columns text-right">Campeón:</div>
                        <div id="campeon" class="small-6 columns" style="margin-bottom:15px"></div>
                    </div>
                    <div class="row">
                        <div class="small-6 columns text-right">Segundo:</div>
                        <div id="segundo" class="small-6 columns" style="margin-bottom:15px"></div>
                    </div>
                    <div class="row">
                        <div class="small-6 columns text-right">Tercero:</div>
                        <div id="tercero" class="small-6 columns" style="margin-bottom:15px"></div>
                    </div>
                    <div class="row">
                        <div class="small-6 columns text-right">Más goles:</div>
                        <div id="masGoles" class="small-6 columns" style="margin-bottom:15px"></div>
                    </div>
                    <div class="row">
                        <div class="small-6 columns text-right">Total goles:</div>
                        <div id="totalGoles" class="small-6 columns" style="margin-bottom:15px"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
}


@*@if (ViewBag.TablasPartidos != null && ViewBag.TablasPartidosSegundaFase != null)
{
    <div class="tabPronosticosContainer" style="width:70%">
        <div class="tabPronosticos active" data-openFase="group" style="width:30%">Grupos</div>
        <div class="tabPronosticos" data-openFase="playoff" style="width:30%">Segunda fase</div>
        <div class="tabPronosticos" data-openFase="specials" style="width:30%">Especiales</div>
    </div>
    
    <div class="contenedorFase" data-fase="group">
        @foreach (System.Data.DataTable table in ((System.Data.DataSet)ViewBag.TablasPartidos).Tables)
        {
            <div class="contenedorPronosticos group" data-containerType="group" style="display:none; width:100%; margin: 0">
                <div style="margin-left:35%; font-size:large; margin-bottom:20px; margin-top:20px;">
                    <div class="backArrow" data-arrowType="group"><img height="25px" width="25px" src="@Url.Content("~/Content/img/backArrow.png")"/></div>
                    <div class="nombreGrupo">@table.Rows[0]["NombreGrupo"]</div>
                    <div class="forwardArrow" data-arrowType="group"><img height="25px" width="25px" src="@Url.Content("~/Content/img/forwardArrow.png")"/></div>
                </div>
                <br/>
                @foreach (System.Data.DataRow row in table.Rows)
                {
                    <div class="match">
                        <div style="float:left; width:8%; margin-top:8px; margin-left:4%">@String.Format("{0:dd/MM}", DateTime.Parse((string)row["FechaHora"]))</div>
                        <div style="float:left; width:7%; margin-top:8px">@String.Format("{0:HH:mm}", DateTime.Parse((string)row["FechaHora"]))</div>
                        <div style="float:left; width:22%; margin-top:8px; text-align:right; margin-right:3%">@row["NombreA"]</div>
                        <div style="float:left; margin-top:4px"><img height="30px" width="30px" src="@Url.Content(string.Concat("~/Content/img/", row["NombreA"], ".png").Replace(" ", "_").Replace("á", "a").Replace("é", "e").Replace("í", "i").Replace("ó", "o").Replace("ú", "u").Replace("ñ", "n"))" alt=""/></div>
                        <div style="float:left; text-align:center; font-size: 1.4em; width:9%; margin-top:4px; margin-left:4%; margin-right:4.5%">@row["PronosticoA"].ToString().Replace("-1", "?") - @row["PronosticoB"].ToString().Replace("-1", "?")</div>
                        <div style="float:left; width:8%; margin-top:4px"><img height="30px" width="30px" src="@Url.Content(string.Concat("~/Content/img/", row["NombreB"], ".png").Replace(" ", "_").Replace("á", "a").Replace("é", "e").Replace("í", "i").Replace("ó", "o").Replace("ú", "u").Replace("ñ", "n"))" alt=""></div>
                        <div style="float:left; margin-top:8px">@row["NombreB"]</div>
                    </div>
                }
            </div>
        }
    </div>
    
    <div class="contenedorFase" data-fase="playoff">
        @foreach (System.Data.DataTable table in ((System.Data.DataSet)ViewBag.TablasPartidosSegundaFase).Tables)
        {    
            <div class="contenedorPronosticos playoff" data-containertype="playoff" style="width:100%; margin: 0">
                <div style="margin-left:35%; font-size:large; margin-bottom:20px; margin-top:20px;">
                    <div class="backArrow" data-arrowtype="playoff"><img height="25px" width="25px" src="@Url.Content("~/Content/img/backArrow.png")"></div>
                    <div class="nombreGrupo">@table.Rows[0]["NombreGrupo"]</div>
                    <div class="forwardArrow" data-arrowtype="playoff"><img height="25px" width="25px" src="@Url.Content("~/Content/img/forwardArrow.png")"></div>
                </div>
                <br>
                @foreach (System.Data.DataRow row in table.Rows)
                {
                    <div class="match">
                        <div style="float:left; width:8%; margin-top:8px; margin-left:4%">@String.Format("{0:dd/MM}", DateTime.Parse((string)row["FechaHora"]))</div>
                        <div style="float:left; width:9%; margin-top:8px">@String.Format("{0:HH:mm}", DateTime.Parse((string)row["FechaHora"]))</div>
                        <div style="float:left; margin-top: 8px; width:4%" data-positionText="@row["Id"]A"></div>
                        <div class="equipoPronosticado" style="float:left; font-size: 1em; width: 20%; margin-top: 8px; text-align:right; margin-left: 1%;">@row["IdA"]</div>
                        <div style="float:left; text-align:center; font-size: 1.4em; width:9%; margin-top:4px; margin-left:4%; margin-right:4.5%">@row["GolesA"].ToString().Replace("-1", "?") - @row["GolesB"].ToString().Replace("-1", "?")</div>
                        <div class="equipoPronosticado" style="float:left; width: 20%; margin-top: 8px; text-align:left; margin-right: 1%;">@row["IdB"]</div>
                        <div style="float: left; width:6%; margin-top: 8px;" data-positionText="@row["Id"]B"></div>
                        <div style="float:left; width: 3%; margin-top: 8px; font-weight: bold; color: black; background-color:White; border-radius: 8px 8px 8px 8px">@row["Id"]</div>
                    </div>
                }
            </div>    
        }
    </div>
    
    <div class="contenedorFase" data-fase="specials">
        <div class="contenedorPronosticos specials" data-containertype="specials" style="width:100%; margin: 0">
            <div style="color:White; height:25px; margin-top:30px">
                <div style="height:30px; width:100%">
                    <div style="float:left; width:15%; margin-left:40%; ">Campeón:</div>
                    <div id="campeon" style="float:left"></div>
                </div>
                <div style="height:30px; width:100%">
                    <div style="float:left; width:15%; margin-left:40%; ">Segundo:</div>
                    <div id="segundo" style="float:left"></div>
                </div>
                <div style="height:30px; width:100%">
                    <div style="float:left; width:15%; margin-left:40%; ">Tercero:</div>
                    <div id="tercero" style="float:left"></div>
                </div>
                <div style="height:30px; width:100%">
                    <div style="float:left; width:15%; margin-left:40%; ">Más goles:</div>
                    <div id="masGoles" style="float:left"></div>
                </div>
                <div style="height:30px; width:100%">
                    <div style="float:left; width:15%; margin-left:40%; margin-bottom:30px">Total goles:</div>
                    <div id="totalGoles" style="float:left; margin-bottom:30px"></div>
                </div>
            </div>
        </div>
    </div>
}*@

<script type="text/javascript">
    function getTeamName(teamId) {
        switch (teamId) {
            case "1": return "Chile"; case "2": return "México"; case "3": return "Ecuador"; case "4": return "Bolivia";
            case "5": return "Argentina"; case "6": return "Uruguay"; case "7": return "Paraguay"; case "8": return "Jamaica";
            case "9": return "Brasil"; case "10": return "Colombia"; case "11": return "Perú"; case "12": return "Venezuela";
            default: return "";
        }
    }
    
    $(document).ready(function () {
        $(".contenedorFase").hide();
        $(".contenedorPronosticos").hide();
        $(".contenedorFase").first().show();
        $(".contenedorFase").each(function () {
            $(this).find(".contenedorPronosticos").first().show();
        });

        //TEXTOS PARA SABER QUÉ PARTIDO SE ESTÁ PRONOSTICANDO
        $("[data-positionText='49A']").text("1A"); $("[data-positionText='49B']").text("2B");
        $("[data-positionText='50A']").text("1C"); $("[data-positionText='50B']").text("2D");
        $("[data-positionText='51A']").text("1B"); $("[data-positionText='51B']").text("2A");
        $("[data-positionText='52A']").text("1D"); $("[data-positionText='52B']").text("2C");
        $("[data-positionText='53A']").text("1E"); $("[data-positionText='53B']").text("2F");
        $("[data-positionText='54A']").text("1G"); $("[data-positionText='54B']").text("2H");
        $("[data-positionText='55A']").text("1F"); $("[data-positionText='55B']").text("2E");
        $("[data-positionText='56A']").text("1H"); $("[data-positionText='56B']").text("2G");

        $("[data-positionText='57A']").text("G49"); $("[data-positionText='57B']").text("G50");
        $("[data-positionText='58A']").text("G53"); $("[data-positionText='58B']").text("G54");
        $("[data-positionText='59A']").text("G51"); $("[data-positionText='59B']").text("G52");
        $("[data-positionText='60A']").text("G55"); $("[data-positionText='60B']").text("G56");

        $("[data-positionText='61A']").text("G57"); $("[data-positionText='61B']").text("G58");
        $("[data-positionText='62A']").text("G59"); $("[data-positionText='62B']").text("G60");

        $("[data-positionText='63A']").text("P61"); $("[data-positionText='63B']").text("P62");
        $("[data-positionText='64A']").text("G61"); $("[data-positionText='64B']").text("G62");


        $(".tabPronosticos").click(function () {
            $(".tabPronosticos").removeClass("active");
            $(this).addClass("active");
            var fase = $(this).attr("data-openFase");
            $(".contenedorFase").hide();
            $("[data-fase='" + fase + "']").show();
            $("#algunResultAbierto").attr("value", "false");
            $(".resultSelect").hide();
        });

        $(".equipoPronosticado").each(function () {
            $(this).text(getTeamName($(this).text()));
        });

        @if (ViewBag.TablaPronosticosEspeciales != null)
        {
            foreach (System.Data.DataRow row in ((System.Data.DataTable)ViewBag.TablaPronosticosEspeciales).Rows)
            {
                <text>$("#campeon").text(getTeamName("</text>@row["IdPrimero"]<text>"));</text>
                <text>$("#segundo").text(getTeamName("</text>@row["IdSegundo"]<text>"));</text>
                <text>$("#tercero").text(getTeamName("</text>@row["IdTercero"]<text>"));</text>
                <text>$("#masGoles").text(getTeamName("</text>@row["IdMasGoles"]<text>"));</text>
                <text>$("#totalGoles").text("</text>@row["TotalGoles"]<text>");</text>
            }
        }
    });
</script>